<template>
    <div class="container">
        <div class="title">猫眼电影</div>
        <div class="box f">
            <div class="cover"></div>
            <div class="form f fv">
                <el-input style="width: 400px; margin-top: 24px;" v-model="form.phone" placeholder="请输入手机号" :prefix-icon="Iphone" />
                <el-input style="width: 400px; margin-top: 24px;" v-model="form.password" type="password" show-password placeholder="请输入密码" :prefix-icon="Lock" />
                <el-button style="margin-top: 42px;" type="primary" @click="login">登录</el-button>
                <el-button style="margin-top: 16px; margin-left: 0" @click="$router.back">返回</el-button>
                <el-checkbox v-model="form.isRead" label="我已阅读并同意《用户服务协议》《隐私政策》" />
                <div class="tip">
                    未注册的手机号将自动生成新账号
                </div>
            </div>
            
        </div>
    </div>
</template>

<script setup>    
    import { Iphone, Lock } from '@element-plus/icons-vue'
    const form = reactive({
        phone: '',
        password: '',
        isRead: false
    })


    const login = () => {
        if (!form.isRead) {
             ElMessage({
                message: '请勾选用户协议',
                type: 'warning',
            })
            return
        }
    }

</script>

<style lang="scss" scoped>
    .container {
        width: 60%;
        margin: auto;
        .title {
            color: var(--el-color-primary);
            font-size: 42px;
            font-weight: bold;
            margin-top: 36px;
        }
        .box {
            margin-top: 20px;
            .cover {
                background: url("../assets/zzx.png") center no-repeat;
                width: 595px;
                height: 422px;
            }
            .form {
                margin-top: 60px;
                margin-left: 60px;
                .tip {
                    margin-top: 24px;
                    color: #999;
                }
            }
        }
    }
</style>